<!DOCTYPE html>
<html>
<head>
    {include file="_Fragment/meta" /}
    <link rel="stylesheet" href="/static/pear/component/pear/css/pear.css" />
    <link rel="stylesheet" href="/static/pear/admin/css/admin.css" />
    <script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <style type="text/css">
        .layui-form-pane .width450{
            width: 388px;
        }
        .layui-form-pane .width60{
            width: 75%;
        }

        .layui-form-mid{
            padding: 0 !important;
        }
        .layui-form-pane .layui-form-text .layui-textarea{
            min-height: 150px;
        }
        .layui-text em, .layui-word-aux {
            color:black !important;
        }
    </style>

</head>

<body class="pear-container">
<div class="layui-row">
    <div class="layui-card">
        <div class="layui-card-body">
            <div id="app1">
                <form id="testform" class="layui-form layui-form-pane" lay-filter="test" action="{:url('addStepPost')}" style="margin:30px;">
                    {notempty name="data.id"}
                    <input name="id" value="{$data.id}" type="hidden" >
                    {/notempty}
                    <div class="layui-form-item">
                        <label class="layui-form-label" >标题(CN)</label>
                        <div class="layui-input-inline" style="width: 560px;">
                            <input type="text" name="title" v-model="form.title" required  lay-verify="required"  placeholder="请输入标题(CN)"  class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label" >标题(EN)</label>
                        <div class="layui-input-inline" style="width: 560px;">
                            <input type="text" name="e_title" v-model="form.e_title" required  lay-verify="required"  placeholder="请输入标题(EN)"  class="layui-input">
                        </div>
                    </div>

                    {notempty name="data"}
                    <div class="layui-form-item">
                        <label class="layui-form-label">课件分类</label>
                        <div class="layui-input-inline" style="width: 560px;">
                            <select name="cate_id" lay-filter="cate_id" lay-verify="required">
                                <option value="">请选择课件分类</option>
                                {volist name="cate" id="vo"}
                                <option value="{$vo.id}" {eq name="data.cate_id" value="$vo.id"}selected{/eq}>{$vo.title}</option>
                                {/volist}
                            </select>
                        </div>
                    </div>
                    {else/}
                    <div class="layui-form-item">
                        <label class="layui-form-label">课件分类</label>
                        <div class="layui-input-inline" style="width: 560px;">
                            <select name="cate_id" lay-filter="cate_id" lay-verify="required">
                                <option value="">请选择课件分类</option>
                                {volist name="cate" id="vo"}
                                <option value="{$vo.id}">{$vo.title}</option>
                                {/volist}
                            </select>
                        </div>
                    </div>
                    {/notempty}

                    <div class="layui-form-item">
                        <label class="layui-form-label">课件标签</label>
                        <div class="layui-input-inline" style="width: 560px">
                            <select name="label_id" lay-filter="label_id" xm-select="select4" xm-select-skin="default" lay-verify="required">
                                {volist name="label1" id="v"}
                                <option value="{$v.id}" selected>{$v.title}</option>
                                {/volist}

                                {volist name="label" id="vo"}
                                <option value="{$vo.id}">{$vo.title}</option>
                                {/volist}
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">是否公开</label>
                        <div class="layui-input-block">
                            <input type="radio" lay-filter="open" name="open" value="1" title="公开" :checked="form.open == 1 ? 'checked':false">
                            <input type="radio" lay-filter="open" name="open" value="2" title="非公开" :checked="form.open == 2 ? 'checked':false">
                        </div>
                        <div class="layui-form-mid layui-word-aux">Tips：公开课件可供所有有资源库权限的用户复制和引用。</div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label" >满分值</label>
                        <div class="layui-input-inline" style="width: 370px;">
                            <input type="number" name="data[sum_score]" readonly v-model="form.sum_score"  placeholder="请输入分数"  class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" >合格限制</label>
                        <div class="layui-input-inline" style="width: 370px;">
                            <input type="radio" name="limit" :checked="form.limit == 0 ? 'checked':false"  lay-filter="limit"  value="0" title="无限制"  >
                            <input type="radio"  name="limit" :checked="form.limit == 1 ? 'checked':false"  lay-filter="limit"  value="1" title="分数限制"   >
                        </div>
                        <div class="layui-form-mid layui-word-aux" v-show="form.limit == 1">
                            <input type="number"  v-model="form.score" lay-verify="required"   placeholder="请输入合格分数"  class="layui-input" list="sssa" >
                            <datalist id="sssa">
                                <option value="0">
                                <option value="15">
                                <option value="30">
                                <option value="45">
                            </datalist>
                        </div>
                        <div class="layui-form-mid layui-word-aux" v-show="form.limit == 2" style="width: 250px;">
                            <input type="number"  v-model="form.fpy" lay-verify="required"   placeholder="请输入正确率(正确题目/所有题目)"  class="layui-input" >
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" >时长限制</label>
                        <div class="layui-input-inline" style="width: 370px;">
                            <input type="radio" name="is_duration"  :checked="form.is_duration == 0 ? 'checked':false"  lay-filter="duration"  value="0" title="不限制"  >
                            <input type="radio" name="is_duration"  :checked="form.is_duration == 1 ? 'checked':false"  lay-filter="duration"  value="1" title="限制"   >
                        </div>
                        <div class="layui-form-mid layui-word-aux" v-show="form.is_duration == 1">
                            <input type="number" name="data[duration]" v-model="form.duration"  placeholder="请输入时长/分钟"  class="layui-input">
                        </div>
                    </div>


                    <div class="layui-form-item">
                        <label class="layui-form-label" >次数限制</label>
                        <div class="layui-input-inline" style="width: 370px;">
                            <input type="radio" name="is_number"  :checked="form.is_number == 0 ? 'checked':false"  lay-filter="number"  value="0" title="不限制"  >
                            <input type="radio" name="is_number"  :checked="form.is_number == 1 ? 'checked':false"  lay-filter="number"  value="1" title="限制"   >
                        </div>
                        <div class="layui-form-mid layui-word-aux" v-show="form.is_number == 1">
                            <input type="number"  v-model="form.number" lay-verify="required"   placeholder="请输入限制次数"  class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item" v-show="form.is_number == 1">
                        <label class="layui-form-label" >回看设置</label>
                        <div class="layui-input-inline" style="width: 370px;">
                            <input type="radio" name="is_number_read"  :checked="form.is_number_read == 0 ? 'checked':false"  lay-filter="number_read"  value="0" title="不可看正确答案"  >
                            <input type="radio" name="is_number_read"  :checked="form.is_number_read == 1 ? 'checked':false"  lay-filter="number_read"  value="1" title="可看正确答案"   >
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-inline">
                            <button type="button" class="layui-btn layui-btn-normal" v-on:click="showAll" >全部展开</button>
                        </div>
                        <div class="layui-form-mid layui-word-aux">
                            <button type="button" class="layui-btn layui-btn-normal" v-on:click="showAll(1)" >全部隐藏</button>
                        </div>
                    </div>


                    <blockquote class="layui-elem-quote" v-for="(item, key) in question"  style="padding-bottom:25px;">
                        <div v-on:click="showHide($event,1)" style="position: relative;width: 80%;right: -5px;top: -5px;float: left; color: #1E9FFF;cursor: pointer;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" >
                            题目[{{key+1}}] : {{item.t}}
                        </div>
                        <div v-on:click="showHide($event)" class="question_show" style="position: relative;width: 80px;right: 70px;top: -5px;float: right;cursor: pointer; text-align: center;" >
                            收起
                        </div>
                        <div style="position: relative;width: 30px;right: -80px;top: -5px;float: right;cursor: pointer;" v-on:click="delQ(key)">
                            <i class="layui-icon layui-icon-close" style=" font-size: 30px;"></i>
                        </div>
                        <div class="layui-form-item layui-form-text" >
                            <label class="layui-form-label">问题：</label>
                            <div class="layui-input-inline width60">
                                <textarea v-model="item.t"  name="data[question][]" lay-verify="required" placeholder="请输入问题" class="layui-textarea"></textarea>
                            </div>
                            <div class="layui-form-mid layui-word-aux">
                                <button type="button" class="layui-btn test1" >上传图片(在后)</button>
                                <input type="file" v-on:change="upload(key,$event)" accept="image/*" name="file" style="position: absolute;width: 125px; height: 34px;top: 0px; left:0px;z-index: 6;opacity: 0;cursor: pointer;" >
                                <div class="layui-upload-list">
                                    <img class="layui-upload-img" v-show="item.i"  :src="item.i" height="100" width="120" >
                                    <input type="hidden" name="" v-model="item.i" >
                                </div>
                            </div>

                        </div>
                        <div class="layui-form-item" >
                            <div class="layui-form-mid layui-word-aux" >
                                <button v-on:click="delQ(key)" type="button" class="layui-btn layui-btn-danger" >删除此题目</button>

                            </div>
                        </div>
                        <div class="layui-form-item" >
                            <label class="layui-form-label">此题分数</label>
                            <div class="layui-input-block">
                                <input type="number" v-model="item.s" lay-verify="required" onkeyup="getFull()"   placeholder="请输入分数"  class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item" >
                            <label class="layui-form-label">答案类型</label>
                            <div class="layui-input-block">
                                <input type="radio" :name="'a_type'+key" :q-key="key" :checked="item.a_type == 0 ? 'checked':false"  lay-filter="a_type"  value="0" title="单选"  >
                                <input type="radio" :name="'a_type'+key" :q-key="key" :checked="item.a_type == 1 ? 'checked':false"  lay-filter="a_type"  value="1" title="多选"   >
                            </div>
                        </div>
                        <div class="layui-form-item" v-for="(item2, key2) in item.a">

                            <label class="layui-form-label">答案[{{item2.b}}]：</label>
                            <div class="layui-input-inline width450">
                                <input type="text" name="data[answer][]" lay-verify="required"  v-model="item2.t"  placeholder="请输入答案"  class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux">
                                <div class="layui-upload">
                                    <button type="button" class="layui-btn test1"  >上传图片(在前)</button>
                                    <input type="file" v-on:change="upload(key,$event,key2)" accept="image/*" name="file" style="position: absolute;width: 125px; height: 34px;top: 0px; left:0px;z-index: 6;opacity: 0;cursor: pointer;" >
                                    <div class="layui-upload-list">
                                        <img class="layui-upload-img" v-show="item2.show" :src="item2.i" height="100" width="120" >
                                        <input type="hidden" name="" v-model="item2.i" >
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-mid layui-word-aux" v-show="item.a.length == key2+1">

                                <button v-on:click="delA(key,key2)" type="button" class="layui-btn layui-btn-danger" >删除此答案</button>

                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button type="button" class="layui-btn layui-btn-warm" v-on:click="addAnser(key)" >添加答案</button>
                            </div>
                        </div>
                        <div class="layui-form-item" >
                            <label class="layui-form-label">正确答案</label>
                            <div class="layui-input-block">
                                <input type="text" v-model="item.check" v-on:click="changeA($event)" lay-verify="required"  readonly   placeholder="请选择答案"  class="layui-input">
                                <div style="display: none;" :id="'a_check'+key">
                                    <input v-for="item2 in item.a" :type=" (item.a_type == 0) ? 'radio':'checkbox' " :value="item2.b"  :q-key="key" :name="'check['+key+']'" :title="item2.b" lay-filter="a_check" lay-skin="primary">
                                </div>
                            </div>
                        </div>
                    </blockquote>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn layui-btn-normal" v-on:click="addQuestion" >添加问题</button>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">

                            <button class="layui-btn" type="button" v-on:click.stop="addTest" v-show="s_status == 0">{{btnMessage}}</button>
                            <button class="layui-btn layui-btn-disabled" type="button" v-show="s_status == 1" >提交中...</button>
                            {notempty name="$test_id"}<a href="javascript:openQrcode({$test_id|default=0});"  class="layui-btn layui-btn-primary">预览</a>{/notempty}
                        </div>
                    </div>
                </form>

                <div style="display: none;" id="jsonData">{$content|raw}</div>
            </div>
        </div>
    </div>
    <!--javascript include-->
    <script src="/static/common/jquery-3.6.0.min.js"></script>
    <script src="/static/pear/component/layui/layui.js"></script>
    <script src="/static/pear/component/pear/pear.js"></script>
    <script>
        var uploadInst;
        var select;
        var upload;
        var app1;
        var form;
        var formSelects = layui.formSelects;
        layui.use(['form', 'laydate', 'upload', 'layer', 'element', 'select'], function(){

            form = layui.form;
            upload = layui.upload;
            select = layui.select;

            select.render({
                placeholder: '请选择课件标签'
            });

            //uploadInstF();
            form.on('radio(duration)', function(data){
                console.log(data.elem.checked); //开关是否开启，true或者false
                app1.form.is_duration = data.value;
            });

            form.on('radio(limit)', function(data){
                app1.form.limit = data.value;
            });

            form.on('radio(open)', function(data){
                app1.form.open = data.value;
            });

            form.on('select(cate_id)', function(data){
                app1.form.cate_id = data.value;
            });

            form.on('radio(number)', function(data){
                console.log(data.elem.checked); //开关是否开启，true或者false
                app1.form.is_number = data.value;
            });
            form.on('radio(number_read)', function(data){
                console.log(data.elem.checked); //开关是否开启，true或者false
                app1.form.is_number_read = data.value;
            });
            form.on('radio(a_type)', function(data){
                var key = $(data.elem).attr('q-key');
                app1.question[key].a_type = data.value;
                $('#a_check'+key).children('div').remove();
                setTimeout(function(){
                    form.render();
                },300);
            });

            form.on('radio(a_check)', function(data){
                var key = $(data.elem).attr('q-key');
                app1.question[key].check = data.value;
            });
            form.on('checkbox(a_check)', function(data){
                var key = $(data.elem).attr('q-key');
                var arr = [];
                $("input[name='check["+key+"]']:checked").each(function (index, item) {
                    if(this.checked){
                        arr.push($(this).val());
                    }
                });

                for(ii in arr){
                    if(!arr[ii]){
                        arr.splice(ii, 1);
                    }
                }
                app1.question[key].check = arr.join(',');
            });

        });

        app1 = new Vue({
            el:"#app1",
            data:{
                s_status:0,
                btnMessage:'保存',
                all:['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U'],
                question:[
                    {
                        id:0,
                        s:10,
                        t:'',
                        i:'',
                        a_type:0,
                        check:'',
                        remark:'',
                        a:[
                            {
                                b:'A',
                                t:'',
                                i:''
                            }
                        ]
                    }
                ],
                form:{
                    id:0,
                    title:'',
                    e_title:'',
                    cate_id:'',
                    label_id:'',
                    open:1,
                    is_duration:0,
                    duration:'',
                    limit:0,
                    sum_score:'',
                    score:'',
                    fpy:'',
                    is_number:1,
                    is_number_read: 0,
                    number:1,
                    question : []
                }
            },
            watch:{
                question:function(newVal){
                    console.log(newVal);
                }
            },
            methods:{
                addQuestion:function(){
                    var newQ = {
                        id:0,
                        s:10,
                        t:'',
                        i:'',
                        a_type:0,
                        check:'',
                        remark:'',
                        a:[
                            {
                                b:'A',
                                t:'',
                                i:''
                            }
                        ]
                    };
                    this.question.push(newQ);
                    getFull();
                    setTimeout(function(){
                        form.render();
                    },300);
                },
                changeA:function(obj){
                    var htmlObj = $(obj.srcElement);

                    htmlObj.next('div').toggle('slow');
                },
                addAnser:function(key){
                    var aa = this.question[key].a;
                    var newA = {
                        b:this.all[aa.length],
                        t:'',
                        i:''
                    };
                    this.question[key].a.push(newA);
                    setTimeout(function(){
                        form.render();
                    },300);
                },
                delQ:function(key){
                    //delete this.question[key];
                    this.question.splice(key,1);
                },
                delA:function(key,key2){
                    //delete this.question[key].a[key2];
                    this.question[key].a.splice(key2,1);
                    setTimeout(function(){
                        $('#a_check'+key).children('div').last('div').remove();
                    },300);
                },
                upload:function(key,event,key2){
                    var file = event.target.files[0];
                    console.log(key);
                    console.log(file);
                    console.log(key2);
                    var formData = new FormData();

                    // HTML 文件类型input，由用户选择
                    formData.append("file", file);
                    $.ajax({
                        url:"{:url('Pub/blob')}",
                        dataType:'json',
                        type:'POST',
                        async: false,
                        data: formData,
                        processData : false, // 使数据不做处理
                        contentType : false, // 不要设置Content-Type请求头
                        success: function(res){
                            if (res.code == '200') {
                                if(key2 || key2 === 0){
                                    app1.question[key].a[key2].i = res.data;
                                    app1.question[key].a[key2].show = true;
                                }else{
                                    app1.question[key].i = res.data;
                                    app1.question[key].show = true;
                                }
                                layer.msg('上传成功',{icon:1});
                            }else{
                                layer.msg(res.msg,{icon:2});
                            }

                        },
                        error:function(response){
                            console.log(response);
                        }
                    });

                },
                showHide:function(obj,type){
                    var htmlObj = $(obj.srcElement);
                    if(type == 1){
                        htmlObj = htmlObj.next('div');
                    }
                    if(htmlObj.parent().children('.layui-form-item').css('display') == 'none'){
                        htmlObj.html('收起');
                    }else{
                        htmlObj.html('展开');
                    }
                    htmlObj.parent().children('.layui-form-item').toggle('slow');

                    //console.log(htmlObj);
                },
                showAll:function(type){
                    $('.layui-elem-quote').each(function(index,ele){
                        if(type == 1){
                            $(this).children('.layui-form-item').hide(500);
                            $(this).children('div').eq(1).html('收起');
                        }else{
                            $(this).children('.layui-form-item').show(500);
                            $(this).children('div').eq(1).html('收起');
                        }
                    });
                },
                addTest:function(){

                    var data1 = form.val("test");
                    app1.form.label_id = data1.label_id;
                    app1.form.cate_id = data1.cate_id;
                    app1.form.e_title = data1.e_title;
                    app1.form.open = data1.open;

                    this.s_status = 1;
                    this.form.question = this.question;
                    var tipsArr = {
                        title:"请输入标题(CN)",
                        e_title:"请输入标题(EN)",
                        cate_id:"请选择课件分类",
                        label_id:"请选择课件标签",
                        question_q_t:'请输入问题',
                        question_a_t:'请输入答案',
                        open:'请选择是否公开',

                    };
                    console.log(this.form);
                    for(item in this.form){
                        var key = item;
                        var value = '';
                        if(typeof this.form[item] == 'array'){
                            for(item2 in this.form[item]){
                                if(typeof this.form[item][item2] == 'array'){
                                    for(item3 in this.form[item][item2]){
                                        key = item+'_'+item2+'_'+item3;
                                        value = this.form[item][item2][item3];
                                    }
                                }else{
                                    key = item+'_'+item2;
                                    value = this.form[item][item2];
                                }
                            }
                        }else{
                            value = this.form[item];
                        }

                        if(tipsArr[key] && !value){
                            app1.s_status = 0;
                            var msg = tipsArr[key] ? tipsArr[key]: key+'字段不能为空';
                            console.log(msg);
                            layer.msg(msg ,{icon:2});
                            return false;
                        }

                    }
                    //return ;

                    //this.s_status = 1;
                    $.ajax({
                        url:"{:url('saveTest')}",
                        dataType:'json',
                        type:'POST',
                        data: this.form,
                        success: function(res){
                            if (res.status == 0) {
                                layer.msg(res.msg,{icon:1},function(){
                                    window.location.reload();
                                });
                            }else{
                                layer.msg(res.msg,{icon:2});
                            }

                        },
                        error:function(response){
                            console.log(response);
                        },
                        complete:function(){
                            app1.s_status = 0;
                        }
                    });
                }
            },
            mounted:function(){
                //uploadInstF();
            },
            created:function(){
                var data = {$content|raw};
                //var data = JSON.parse($('#jsonData').html());
                console.log(typeof data);
                console.log(data);
                if(!$.isEmptyObject(data)){
                    this.btnMessage = '保存';
                    this.form = data;
                    this.question = data.question;

                    //默认隐藏
                    setTimeout(function(){
                        $('.question_show').trigger('click');
                        //form.render('radio');
                    },300);

                }
            }
        });

        function getFull(){
            var arr = app1.question;
            var sum = 0;
            for(item in arr){
                sum += parseFloat(arr[item].s)
            }
            app1.form.sum_score = sum;
        }
        getFull();

        function openQrcode(id){
            funAjax({
                url:"{:url('Preview/createQrcode')}",
                data:{id:id},
                success:function(res){
                    if(res.code == 1){
                        layer.open({
                            type: 1,
                            shade: false,
                            title: false, //不显示标题
                            content: '<img height="300" src="'+ res.data +'" >', //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响

                        });
                    }else{
                        layer.msg(res.msg,{icon:2});
                    }
                }
            });
        }

        function funAjax(obj){
            var loading = layer.msg("数据交互中...", {
                icon: 16,
                time: 0,
                shade: [0.3, '#000']
            });
            $.ajax({
                url: obj.url ? obj.url:'',
                type: obj.type ? obj.type:'get',
                //cache: false,
                data: obj.data ? obj.data:{},
                dataType:"json",
                success:function(res){
                    layer.close(loading);
                    if(typeof obj.success == 'function'){
                        obj.success(res);
                    }else{
                        if(res.code == 1){
                            if(res.url){
                                layer.msg(res.msg,{icon:1,time:1200},function(){
                                    window.location.href= res.url;
                                });
                            }else{
                                layer.msg(res.msg,{icon:1},function(){
                                    //window.location.reload();
                                });
                            }
                        }else{
                            layer.msg(res.msg);
                        }
                    }
                },
                error:function(XMLHttpRequest, textStatus, errorThrown){
                    layer.close(loading);
                    layer.msg(textStatus+':'+errorThrown);
                }
            });
        }
    </script>
</div>

</body>
</html>